How to implement $.fn

Hi there,

I've noticed that this plugin seems abandoned, it has not been updated in the last 3 years. So I've tested it with jQuery v2.x and it works, where as with jQuery v3.x it was failing with:

Uncaught TypeError: url.indexOf is not a function
    at jQuery.fn.load (jquery-3.6.1.js:10389:13)

What is the error that you are getting?

Thank you for your answer I get "i(...).fn.lightspeedBox is not a function" But i forgot about jQuery compatibility. when i try to init it in app.js

Maybe you know a plugin or where i can find a plugin that can do lightbox and specially download button, i want to allow my user to download auto generated images with one plugin

Hi there,

One option is to include jQuery and the lightbox plugin via their CDNs on the specific view that you need them on.

Alternatively, you could use the following lightbox implementation with Alpine and Tailwind CSS:

https://tailwindcomponents.com/component/alpinejs-tailwindcss-lightbox-modal

And implement a download button with pure JavaScript, eg:

// Using fetch
async function downloadImage(imageSrc) {
  const image = await fetch(imageSrc)
  const imageBlog = await image.blob()
  const imageURL = URL.createObjectURL(imageBlog)

  const link = document.createElement('a')
  link.href = imageURL
  link.download = 'image file name here'
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

Let me know how it goes!

That is great! Happy to hear that you've got it working with that new tool, looks great!